<template>
	<view class="wrapper">
		<swiper class="swiper" circular :indicator-dots="true" indicator-color="#fff" indicator-active-color="#FFC842">
			<swiper-item>
				<view class="content">
					<button class="skip">跳过</button>
					<image class="changeText" src="@/static/changeT1.png"></image>
					<image class="changePic" src="@/static/changeP1.png"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="content">
					<button class="skip">跳过</button>
					<image class="changeText" src="@/static/changeT2.png"></image>
					<image class="changePic" src="@/static/changeP2.png"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="content">
					<button class="skip">跳过</button>
					<image class="changeText" src="@/static/changeT3.png"></image>
					<image class="changePic" src="@/static/changeP3.png"></image>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup lang="ts">

</script>

<style scoped>
	.wrapper {
		width: 100vw;
		height: 93.5vh;
	}
	.swiper{
		width: 100vw;
		height: 93.5vh;
	}
	.content {
		background-image: url("@/static/background.png");
		background-size: cover;
		background-repeat: no-repeat;
		position: relative;
		width: 100vw;
		height: 93.5vh;
	}

	.skip {
		position: absolute;
		top: 28rpx;
		right: 30rpx;
		width: 104rpx;
		height: 52rpx;
		font-size: 22rpx;
		background-color: rgba(243, 243, 243, .24);
		color: #fff;
		border-radius: 26rpx;
		line-height: 52rpx;
	}

	.changeText {
		width: 456rpx;
		height: 126rpx;
		position: absolute;
		top: 52rpx;
		left: 148rpx;
	}

	.changePic {
		width: 562rpx;
		height: 972rpx;
		position: absolute;
		top: 208rpx;
		left: 94rpx;
	}
</style>